export const oneLineShow = (content: string, width: number, fontSize: number, lineHeight = 16) => {
    const realContent = content !== undefined && content !== '' ? content : '-';
    return isOverLines(content, width, fontSize, lineHeight, 1) ? (
        <Tooltip placement="bottom" title={content}>
            <div className="text-one-line-ellipsis" style={{ width }}>
                {realContent}
            </div>
        </Tooltip>
    ) : (
        <div className="text-one-line-ellipsis">{realContent}</div>
    );
};
export const isOverLines = (
    content: string,
    width: number,
    fontSize: number,
    lineHeight = 16,
    lines = 3
) => {
    const testDom = document.createElement('div');
    testDom.style.width = `${width}px`;
    testDom.style.fontSize = `${fontSize}px`;
    testDom.style.position = 'fixed';
    testDom.style.visibility = 'hidden';
    testDom.style.wordBreak = 'break-all';
    testDom.style.lineHeight = `${lineHeight}px`;
    testDom.innerHTML = content;
    document.body.appendChild(testDom);
    const { height } = testDom.getBoundingClientRect();
    document.body.removeChild(testDom);
    return height > lineHeight * lines;
};
  .text - one - line - ellipsis {
    overflow: hidden;
    text - overflow: ellipsis;
    display: -webkit - box;
    -webkit - line - clamp: 1;
    -webkit - box - orient: vertical;
}
